import Vue from 'vue'
import App from './App.vue'

// 引入Find组件
import Find from "./views/Find.vue"
import XiaoHu from "./views/XiaoHu.vue"
import LaiZhu from "./views/LaiZhu.vue"
import NotFound from "./views/NotFound.vue"

// 引入子路由组件
import Recommend from "./views/second/Recommend.vue"
import Ranking from "./views/second/Ranking.vue"
import SongList from "./views/second/SongList.vue"

Vue.config.productionTip = false
// 导入vue-router模块
import VueRouter from 'vue-router'

// 挂载到Vue上
// 这一步VueRouter注册了两个全局组件 RouterLink 和 Routerview
Vue.use(VueRouter)
// 配置路由规则
let routes = [{
    path: "/",
    // 重定向,因为第一次打开页面是没有内容的需要使用重定向让它自动切到一个组件中
    redirect: "/laijiang"
  },
  // 一个对象表示一条映射规则,请求什么路径切换什么组件
  {
    name: "Find",
    path: "/laijiang",
    // componet 是配置规则顶的属性名,不能随便更改
    component: Find,
    children: [{
      // 一个对象表示一条子路由规则
      // 希望用户访问/find/recommend
      path: "recommend",
      component: Recommend,
    }, {
      // 一个对象表示一条子路由规则
      // 希望用户访问/find/recommend
      path: "ranking",
      component: Ranking,
    }, {
      // 一个对象表示一条子路由规则
      // 希望用户访问/find/recommend
      path: "songlist",
      component: SongList,
    }]
  },
  {
    name: "XiaoHu",
    path: "/huwenshuai",
    component: XiaoHu
  },
  {
    name: "LaiZhu",
    // 用来匹配query传参或无传参的情况
    path: "/laizhu",
    component: LaiZhu
  },
  {
    // 定义接收的参数,动态路径传参
    // 加了冒号name就是参数
    // 一定不要忘记加:,如果忘了就变成/part/name
    // name最终会放到$route.param中作为name属性传递给目标组件
    // 有些论坛会用年月日来作为路径参数查询不同时间的帖子
    /* name:"LaiZhu", */
    path: "/huwenshuai/:username/:age",
    component: XiaoHu
  },
  {
    path: "*",
    component: NotFound
  }
]
// 4. 根据规则创建路由对象
let router = new VueRouter({
  routes: routes,
  // 设置路由模式,取值范围:hash/history
  // hash:带井号的路径
  // history:不带井号的路径,但是要后端进行配置 
  mode: "history"
})
// 将路由对象注入到newVue创建的实例中
new Vue({
  render: h => h(App),
  router
}).$mount('#app')